<template>
	<view class="mons">
		<view class="times">
			<image src="../../static/img/3/3-65.png" mode="widthFix"></image>
			<picker mode="date" :value="date" :start="startDate" fields='month' :end="endDate" @change="bindDateChange">
				<view class="uni-input">{{date}}</view>
			</picker>
			<view class="r">
				获得：50000 使用：30000
			</view>
		</view>
		<view class="list">

			<view class="li">
				<view class="lil">
					<view>
						完成每日登录
					</view>
					<view>
						2017-05-01 15:00
					</view>
				</view>
				<view class="rig red">
					-50
				</view>
			</view>
			<view class="li">
				<view class="lil">
					<view>
						完成每日登录
					</view>
					<view>
						2017-05-01 15:00
					</view>
				</view>
				<view class="rig">
					+50
				</view>
			</view>
			<view class="li">
				<view class="lil">
					<view>
						完成每日登录
					</view>
					<view>
						2017-05-01 15:00
					</view>
				</view>
				<view class="rig">
					+50
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "",
		components: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		data() {
			const currentDate = this.getDate({
			            format: true
			 })
			return {
				date: currentDate,
			}
		},
		methods: {
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				// let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				// day = day > 9 ? day : '0' + day;
				return `${year}-${month}`;
			}
		},
		onNavigationBarButtonTap(){
				   uni.navigateTo({
				       url: '/pages/user/myjfjs'
				   })
		}

	}
</script>

<style scoped>
	.times{
		padding-left: 30rpx;
		padding-right: 30rpx;
		height: 83rpx;
		line-height: 83rpx;
		font-size:22rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(102,102,102,1);
	}
	.times image{
		display: inline-block;
		width: 24rpx;
		vertical-align: middle;
		margin-right: 10rpx;
	}
		.times .r{
			float: right;
		}
	.times picker{
		display: inline-block;
		vertical-align: middle;
	}
	.list .li {
		margin-bottom: 1px;
		background: #fff;
		padding: 30rpx;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
	}

	.lil {
		width: 60%;
		display: inline-block;
		vertical-align: middle;
	}

	.list .li .rig {
		display: inline-block;
		/* float: right; */
		width: 40%;
		text-align: right;
		color: #1DC18D;
	}
.list .li .red{
	color: #F0406F;
}
	uni-page-body {
		height: 100%;
	}

	.mons {
		min-height: 100%;
		background: #EEEEEE;
	}
</style>
